<template>
  <div class="table-box">
    <Table ref="tableRef" row-key="deptId" :columns="columns" :request-api="deptApi.list" :pagination="false" :tool-button="true">
      <template #header>
        <ElButton v-auth="'system:dept:add'" type="primary" :icon="CirclePlus" @click="handleAdd">新增部门</ElButton>
      </template>
      <!-- 部门操作 -->
      <template #action="{ row, id }">
        <TableAction :actions="getActions(row, id)" :show-num="0"></TableAction>
      </template>
    </Table>
    <Dialog ref="dialogRef" :title="title" @submit="handleSubmit">
      <Form ref="formRef" :schemas="schemas" label-width="100px">
        <template #parentId="{ formModel, schema }">
          <ApiTreeSelect
            v-model="formModel[schema.field]"
            :request-api="deptApi.list"
            :callback="res => handleCallback(res)"
            style="width: 100%"
            filterable
            clearable
          ></ApiTreeSelect>
        </template>
      </Form>
    </Dialog>
  </div>
</template>

<script setup lang="tsx" name="SysMenu">
import { ref } from "vue";
import { ElButton } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import { Table, TableAction, useTable } from "@/components/Table";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, ApiTreeSelect, useForm } from "@/components/Form";
import { ActionItem } from "@/components/Table/type";
import deptApi from "./api";
import { columns, schemas } from "./data";
const tableRef = ref();
const dialogRef = ref();
const formRef = ref();
const { updateFields, resetFields, validateFields } = useForm(formRef);
const { getTableList } = useTable(tableRef);
const { open, openLoading, close } = useDialog(dialogRef);
const title = ref("");
const deptId = ref();
const handleAdd = async () => {
  await resetFields();
  title.value = "新增部门";
  deptId.value = null;
  await open(0);
};
const handleSubmit = flag => {
  openLoading(async () => {
    const fields = await validateFields();
    if (flag) {
      await deptApi.edit(fields);
    } else {
      await deptApi.add(fields);
    }
    close();
    await getTableList();
  });
};
const handleCallback = (depts: Array<any>): Array<any> => {
  return filterDept(depts, deptId.value);
};
const filterDept = (depts: Array<any>, deptId: Number, disabled?: Boolean): Array<any> => {
  if (depts) {
    return depts.map(dept => {
      let _disabled = disabled || dept.deptId === deptId;
      return {
        value: dept.deptId,
        label: dept.deptName,
        disabled: _disabled,
        children: filterDept(dept.children, deptId, _disabled)
      };
    });
  } else {
    return [];
  }
};
const getActions = (row, id): Partial<ActionItem>[] => {
  return [
    {
      type: "primary",
      icon: "plus",
      auth: "system:dept:add",
      onClick: () => {
        title.value = "新增部门";
        dialogRef.value.open(0);
        updateFields({ parentId: id, menuType: row.menuType + 1 });
      }
    },
    {
      type: "primary",
      icon: "edit",
      auth: "system:dept:edit",
      onClick: async () => {
        title.value = "编辑部门";
        dialogRef.value.open(1);
        deptId.value = id;
        const res = await deptApi.query(id);
        await updateFields(res);
      }
    },
    {
      type: "danger",
      auth: "system:dept:remove",
      popConfirm: {
        onConfirm: async () => {
          await deptApi.remove(id);
          await getTableList();
        }
      },
      icon: "delete"
    }
  ];
};
</script>
